<template>
  <div class="strategy-add" v-loading="loading">
    <el-card class="custom-card">
      <div class="header">
        <span class="title"> 添加行程规划</span>
      </div>
      <div class="form-database-form">
        <el-form :model="form" ref="formModel" label-width="130px" status-icon validate-on-rule-change
          class="custom-form">
          <div class="form-content">
            <div class="right-section">
              <el-form-item label="图片" prop="photo">
                <e-upload-images v-model="form.photo">
                </e-upload-images>
              </el-form-item>
              <el-form-item label="线路编号" prop="number" :rules="[{ required: true, message: '请填写线路编号' }]">
                <el-input placeholder="输入线路编号" class="custom-input input-number" style="width:250px;"
                  v-model="form.number" />
              </el-form-item>
              <el-form-item label="线路名称" prop="strategyName" required :rules="[{ required: true, message: '请填写线路名称' }]">
                <el-input placeholder="输入线路名称" class="custom-input input-strategyName" style="width:450px;"
                  v-model="form.strategyName" />
              </el-form-item>

              <el-form-item label="城市" prop="city">
                <el-input placeholder="输入城市" class="custom-input input-city" style="width:450px;" v-model="form.city" />
              </el-form-item>
              <el-form-item label="时间" prop="month">
                <el-input placeholder="输入时间" class="custom-input input-month" style="width:450px;"
                  v-model="form.month" />
              </el-form-item>
              <el-form-item label="天数" prop="days">
                <el-input placeholder="输入天数" class="custom-input input-days" style="width:450px;" v-model="form.days" />
              </el-form-item>
              <el-form-item label="价格" prop="price" required
                :rules="[{ required: true, message: '请填写价格' }, { validator: rule.checkNumber, message: '输入一个有效数字' }]">
                <el-input placeholder="输入价格" class="custom-input input-price" style="width:250px;"
                  v-model="form.price" />
              </el-form-item>
            </div>
          </div>
          <div class="description-section">
            <label class="description-label">线路特色</label>
            <el-form-item label="" prop="feature">
              <e-editor v-model="form.feature"></e-editor>
            </el-form-item>
          </div>
          <div class="description-section">
            <label class="description-label">线路简介</label>
            <el-form-item label="" prop="introduction">
              <e-editor v-model="form.introduction"></e-editor>
            </el-form-item>
          </div>
          <el-form-item v-if="btnText" class="button-item">
            <el-button type="primary" class="custom-button" @click="submit">{{ btnText }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<style scoped>
.attractionkind-add .custom-card .el-card__body {
  padding: 10px !important;
}

.header {
  background: #7fabbe;
  margin: 15px;
  color: #fdfcfc;
  padding: 15px 20px;
  font-weight: bold;
  letter-spacing: 9px;
  border-radius: 8px;

}


.strategy-add {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f2f5;
}

.custom-card {
  width: 100%;
  /* 修改这里的宽度 */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

}

.custom-form {
  display: flex;
  flex-direction: column;
}

.form-content {
  padding-left: 20%;
  display: flex;
  justify-content: space-between;
}


.right-section {
  width: 85%;
}

.description-section {
  margin-top: 20px;
}

.description-label {
  padding-left: 15%;
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.custom-input {
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 5px;
}

.input-number {
  width: 450px !important;
}

.input-strategystrategyName {
  width: 450px !important;
}

.input-city {
  width: 450px !important;
}

.input-month {
  width: 450px !important;
}

.input-days {
  width: 450px !important;
}

.input-price {
  width: 450px !important;

}

.custom-input::placeholder {
  color: #bfbfbf;
}

.button-item {
  display: flex;
  justify-content: center;
}

.custom-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #659ab1;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.custom-button:hover {
  background-color: #b3cdd8;
  border: #b3cdd8;
}

.form-database-form {
  padding-top: 30px;
  padding-left: 5px;
  padding-right: 100px;
  padding-bottom: 20px;
}

.upload-demo i.el-icon-plus {
  font-size: 32px;
}
</style>
<script>
import api from '@/api'
import rule from '@/utils/rule'
import { extend } from '@/utils/extend'


export default {
  strategyName: 'strategy-add',
  data() {
    return {
      rule,
      loading: false,
      form: {
        number: rule.getID(),
        strategyName: '',
        photo: '',
        city: '',
        month: '',
        days: '',
        price: '',
        feature: '',
        introduction: '',


      },


    }
  },
  watch: {
  },
  props: {
    isRead: {
      type: Boolean,
      default: true
    },
    btnText: {
      type: String,
      default: '提交'
    },
  },

  computed: {},
  methods: {
    submit() {
      this.$refs.formModel.validate().then(res => {
        if (this.loading) return;
        this.loading = true;
        var form = this.form;

        this.$post(api.strategy.insert, form).then(res => {
          this.loading = false;
          if (res.code == api.code.OK) {
            this.$message.success('添加成功');
            this.$emit('success', res.data);
            this.$refs.formModel.resetFields();
            this.loadInfo();
          } else {
            this.$message.error(res.msg);
          }
        }).catch(err => {
          this.loading = false;
          this.$message.error(err.message);
        })

      }).catch(err => {
        console.log(err.message);
      })

    },
    loadInfo() {

      var form = this.form;
      // 获取模块得数据
      this.loading = true;
      this.$post(api.strategy.create, {
        id: this.$route.query.id
      }).then(res => {
        this.loading = false;
        if (res.code == api.code.OK) {
          extend(this, res.data);
        } else {
          this.$message.error(res.msg);
          this.$router.go(-1);
        }
      }).catch(err => {
        this.$message.error(err.message);
        this.$router.go(-1);
      });
    },
  },
  created() {
    this.loadInfo();
  },
  mounted() {
  },
  destroyed() {
  }
}
</script>
